<template>
	<div class="zs-table-page-container">
		<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
			<div>
				<el-select v-model="searchObj.inventoryId" filterable clearable class="zs-select-md zs-space-right-sm" placeholder="类型" @change="queryList">
					<el-option v-for="item in inspectionTypeList" :key="item.inventoryId" :label="item.inventoryName" :value="item.inventoryId" />
				</el-select>
				<el-input v-model="searchObj.deviceName" class="zs-select-md zs-space-right-sm" placeholder="设备名称" clearable />
				<el-input v-model="searchObj.deviceNum" class="zs-select-md zs-space-right-sm" placeholder="设备编号" clearable />
				<el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
					<template #reference>
						<el-button class="zs-btn-square-solid" :class="{ 'zs-btn-square-solid-active': searchObj.status }">
							<el-icon>
								<MoreFilled />
							</el-icon>
						</el-button>
					</template>
					<template #default>
						<el-select v-model="searchObj.status" class="zs-select-md zs-space-right-sm zs-space-top" placeholder="状态" clearable @change="queryList" :teleported="false">
							<el-option v-for="item in dictObj.PROCESS_INSTANCE_STATUS" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
						</el-select>
					</template>
				</el-popover>
				<el-button class="zs-btn-plain" @click="queryList"> 查询 </el-button>
			</div>
		</div>

		<!-- teble -->
		<div class="zs-card zs-table-page-content">
			<el-table class="zs-table-page-main" :data="tableData.data" v-loading="tableData.loading" stripe>
				<el-table-column type="index" label="序号" width="60" :align="'center'" :index="index => index + 1 + (tableData.currentPage - 1) * curPageSize" />
				<el-table-column prop="inventoryName" label="类型" show-overflow-tooltip align="center" :formatter="defaultTableData" />
				<el-table-column prop="deviceName" label="设备名称" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="deviceNum" label="设备编号" show-overflow-tooltip align="left" :formatter="defaultTableData" />
				<el-table-column prop="formatLastMaintenanceTime" label="最近保养" show-overflow-tooltip align="center" :formatter="defaultTableData" />
				<el-table-column prop="formatBeforePresentDay" label="距今时间" show-overflow-tooltip align="center" :formatter="defaultTableData" />
				<el-table-column prop="statusName" label="状态" show-overflow-tooltip align="center" :formatter="defaultTableData">
					<template #default="{ row }">
						<span :class="{'to_be_started': row.status == 1, 'to_be_normal': row.status == 20, 'to_be_delay': row.status == 25,'to_be_schedule': row.status == 100,'to_be_overdue': row.status == 105}">{{ row.statusName || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column label="保养记录" show-overflow-tooltip align="center" width="90" :formatter="defaultTableData">
					<template #default="{ row }">
						<el-link v-if="row.maintenanceNum > 0" :underline="false" @click="goMaintenacePage(row)">{{ row.maintenanceNum }}次</el-link>
						<span v-else>0次</span>
					</template>
				</el-table-column>
			</el-table>
			<div class="zs-space-top-sm zs-table-page-pagination">
				<el-pagination v-model:currentPage="tableData.currentPage" v-model:page-size="curPageSize" :page-sizes="curPageSizes" :small="true" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="pageChange('size', $event)" @current-change="pageChange('page', $event)" />
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { defaultTableData, parseTime, monthDayDiff } from '@/utils/publicUtils';
	import { useStore } from 'vuex';
	import { useRoute, useRouter } from 'vue-router';
	import detailApi from '@/api/Manage/Business/detailPages';

	const store = useStore();
	const curPageSizes = ref(store.state.uiPageSizes);
	const curPageSize = ref(store.state.uiPageSizeDefault);
	const router = useRouter();
	const routeQuery = useRoute().query;
	let dictObj = store.getters.getDictObj(['PROCESS_INSTANCE_STATUS']);

	//查询条件
	let searchObj = reactive({ pageNumber: 1, pageSize: curPageSize.value, projectCode: routeQuery.projectCode, queryTime: routeQuery.queryTime });

	// 列表 filed
	let tableData = reactive({
		currentPage: 1,
		total: 0,
		loading: false,
		data: [],
	});

	// 类型数据源
	const inspectionTypeList = ref([]);
	const getEquipmentType = async () => {
		tableData.loading = true;
		let res = await detailApi.equipmentTypeApi({ projectCode: routeQuery.projectCode });
		if (res.data.code !== 200) return;
		inspectionTypeList.value = res.data.data || [];
	};

	// 列表数据源
	const queryList = async () => {
		tableData.loading = true;
		let res = await detailApi.equipmentMaintenListApi(searchObj);
		if (res.data.code !== 200) return;
		initData(res.data.data.list);
		tableData.data = res.data.data.list || [];
		tableData.total = res.data.data.total || 0;
		tableData.loading = false;
	};

	const initData = list => {
		list.forEach(item => {
			item.formatLastMaintenanceTime = item.lastMaintenanceTime ? parseTime(item.lastMaintenanceTime, '{y}-{m}-{d} {h}:{i}') : '-';
			let today = new Date();
			today.setHours(0, 0, 0, 0);
			let diffData = monthDayDiff(item.lastMaintenanceTime, today.getTime());
			let year = diffData.year ? diffData.year + '年' : '';
			let month = diffData.month ? diffData.month + '个月' : '';
			let day = diffData.day ? diffData.day + '天' : '';
			let diffDay = year + month + day;
			item.formatBeforePresentDay = item.lastMaintenanceTime ? diffDay : '-';
		});
	};

	// 分页
	const pageChange = (type, size) => {
		if (type == 'size') {
			searchObj.pageSize = size;
		} else {
			searchObj.pageNumber = size;
		}
		queryList();
	};

	const goMaintenacePage = row => {
		router.push({
			path: '/page/routeController/index',
			query: {
				rid: 'page_query_device_maintenance_record_list',
				rTitle: '设备保养明细',
				deviceId: row.deviceId,
				deviceName: encodeURIComponent(row.deviceName),
				projectCode: routeQuery.projectCode,
				queryTime: routeQuery.queryTime,
			},
		});
	};

	getEquipmentType();
	queryList();
</script>

<style lang="scss" scoped>
	:deep(.el-link .el-link__inner) {
		color: #477afd;
		font-weight: initial;
		font-size: 13px;
	}
	.to_be_started {
		color: #8ea2ee;
	}
	.to_be_normal {
		color: #43c902;
	}
	.to_be_delay {
		color: #ed1a2c;
	}
	.to_be_schedule {
		color: #ccc;
	}
	.to_be_overdue {
		color: #f7b500;
	}
</style>
